<script lang='ts' setup name='Person'>
import { ref } from 'vue'
import type { UserInter } from "@/types/index";

// const userList = ref<UserInter[]>([])

// const props = defineProps<{
//     userList: UserInter[]
// }>()
// const userList = props.userList



// const props = defineProps<{
//     userList: UserInter[]
// }>()
// const {userList} = props


//获取某一个属性
const {userList} = defineProps<{
    userList: UserInter[]
   
}>()



function appendUserList() {
    userList.push({ name: "追加的数据", age: 30, address: "荆州" })
}


</script>

<template>

    <div class="inner">

        <button @click="appendUserList">追加props中的数组</button>
        <ul>
            <li v-for="user in userList">{{ user }}</li>
        </ul>
    </div>



</template>

<style scoped>
.inner {
    background-color: skyblue;
    border-radius: 15px;
    box-shadow: 0 0 10px grey;
    margin: 10px;
    padding: 20px;
}
</style>